<template>
  <div>
    <el-form :disabled="readonly">
      <table style="width: 98%" class="tab-table">
        <tr>
          <th scope="col" width="25%" align="left">
            <label>{{ $t("business.workload.key") }}</label>
          </th>
          <th scope="col" width="10%" align="left">
            <label>{{ $t("business.workload.operator") }}</label>
          </th>
          <th scope="col" width="25%" align="left">
            <label>{{ $t("business.workload.value") }}</label>
          </th>
          <th scope="col" width="16%" align="left">
            <label>{{ $t("business.workload.effect") }}</label>
          </th>
          <th scope="col" width="15%" align="left">
            <label>{{ $t("business.workload.toleration_seconds") }}</label>
          </th>
          <th align="left" />
        </tr>
        <tr v-for="(row, index) in tolerations" v-bind:key="index">
          <td>
            <ko-data-item v-model="row.key" itemType="input" />
          </td>
          <td>
            <ko-data-item
              v-model="row.operator"
              itemType="select"
              :selections="options.operator_list"
            />
          </td>
          <td>
            <ko-data-item
              v-if="row.operator === 'Exists'"
              v-model="row.value"
              disabled
              placeholder="N/A"
              itemType="input"
            />
            <ko-data-item
              v-if="row.operator !== 'Exists'"
              v-model="row.value"
              itemType="input"
            />
          </td>
          <td>
            <ko-data-item
              v-model="row.effect"
              itemType="select"
              :selections="options.effect_list"
            />
          </td>
          <td>
            <ko-data-item
              v-model.number="row.tolerationSeconds"
              :disabled="row.effect !== 'NoExecute'"
              itemType="number"
              :dividerName="$t('business.workload.seconds')"
            />
          </td>
          <td>
            <el-button
              type="text"
              style="font-size: 10px"
              @click="handleTolerationsDelete(index)"
            >
              {{ $t("commons.button.delete") }}
            </el-button>
          </td>
        </tr>
        <tr>
          <td align="left">
            <el-button @click="onHandleTolerationsAdd">
              {{ $t("business.workload.add") }}
              {{ $t("business.workload.toleration") }}
            </el-button>
          </td>
        </tr>
      </table>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { Toleration } from "@/views/domain/kubeHud/api/k8s";
import KoDataItem from "@/views/domain/kubeHud/views/components/ko-data-item/index.vue";
import { reactive } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

type Prop = {
  readonly?: boolean;
};

const props = defineProps<Prop>();
const tolerations = defineModel<Toleration[]>("tolerations");

const options = reactive({
  operator_list: [
    { label: "Exists", value: "Exists" },
    { label: "=", value: "Equal" }
  ],
  effect_list: [
    { label: t("business.workload.all"), value: "" },
    {
      label: t("business.workload.no_schedule"),
      value: "NoSchedule"
    },
    {
      label: t("business.workload.prefer_no_schedule"),
      value: "PreferNoSchedule"
    },
    { label: t("business.workload.no_execute"), value: "NoExecute" }
  ]
});

const onHandleTolerationsAdd = () => {
  tolerations.value.push({
    key: "",
    operator: "Exists",
    value: "",
    tolerationSeconds: 0
  });
};

const handleTolerationsDelete = (index: number) => {
  tolerations.value.splice(index, 1);
};
</script>
